*{padding:0;margin:0;}
.date {width: 90%;margin: auto;border-radius: 10px; border: 1px solid rgb(18,191,209);}
s{text-decoration:none;}
p {margin: 0;}
.calendar{color:#666;position:relative;}
.calendar li{list-style:none;}
.calendar a{text-decoration:none;color:#f60;}
.calendar .nowDate{background: rgb(18,191,209); border-radius: 5px 5px 0 0;text-align:center;font-size:16px;padding: 0; color: #ffffff;}
.calendar .nowDate span{display:inline-block;}
.calendar .nowDate a{text-decoration:none;margin:0 25px;}
.calendar .nowDate .prevMonth{background-position:-168px -96px; }
.calendar .nowDate .nextMonth{background-position:-168px -120px; }
.calendar .nowDate b{cursor:pointer;padding:0 2px;}
.calendar .sun{color: #666; font-size: 12px;}
.calendar .week{width:100%;background:#ffffff;font-weight:600;font-size:12px; color:rgb(215,215,215);}
.calendar .week span{display:inline-block;text-align:center;width:13%; padding:10px 0;}
.calendar .days {
   padding-left: 5px;
}
.calendar .days li{float:left;display:block;width:14%;height:35px;border:1px solid #e5e5e5;position:relative;}
.calendar .days li span{margin:2px;}
.calendar .days .gray{opacity: 0.5;border: 1px solid #ccc;filter: Alpha(Opacity=50);color: #ccc;}
.calendar .days .current{border:1px solid #f60;}
.calendar .days li .d{position:absolute;bottom:0;right:5px;font-size:15px;font-family:Trebuchet MS;font-weight:600;}

 .calendar .yearList,.calendar .monthList{border:1px solid #e0e0e0; position:absolute;left:50%;margin-left:-100px;background:#fff;z-index:2;border-radius:5px;top:35px;display:none;}

.calendar .yearList ul{height:91px;}
.calendar .yearList li{float:left;padding:6px 17px;cursor:pointer;}
.calendar .yearList li:hover{background:#e5e5e5;}
.calendar .yearList li.current{background:#f60;color:#fff;}

.calendar .yearList p{padding:3px 5px;font-size:14px;font-weight:600;border-top:1px solid #e0e0e0;background:#f5f5f5;text-align:center;}
.calendar .yearList p .prev{float:left;}
.calendar .yearList p .next{float:right;}
.calendar .monthList li{float:left;width:56px;text-align: center;padding:5px;cursor:pointer;}
.calendar .monthList li:hover{background:#e5e5e5;border-radius:3px;}
.calendar .monthList li.current{color:#fff;}
.calendar .monthList li.current{background:#f60;border-radius:3px;}

.year {
    font-size: 16px;
    padding: 10px;
    font-weight: bold;
}

.month {
    background: #ffffff;
    color: #000000;
    padding: 5px 0;
}

.date-message {
    background: rgb(18,191,209);
    margin-top: 65%;
    text-align: center;
    padding: 30px 0 50px 0;
    border-radius: 0 0 5px 5px;
}
.date-message img {
    width: 10px;
    height: 16px;
}

.date-message span {
    padding: 8px 10px;
    border-radius: 15px;
    border: 1px solid rgb(12,220,242);
    margin: 0 5%;
}

.date-message span i {
    color: #ffffff;
    font-style:normal
}

.date-opera {
    margin-top: 20px;
    padding: 0 15px;
}

.date-opera img {
    width: 35px;
    height: 35px;
}

@media screen and (max-height: 568px) {
    .calendar .days li {
        height: 30px;
    }

    .date-message {
        margin-top: 185px;
    }

    .calendar .week span {
        padding: 5px 0;
    }
}